<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>电商大数据管理平台</title>
		<link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css">
		<link rel="stylesheet" href="plugins/element-ui/theme-default/index.css" />
		<link rel="stylesheet" href="css/dashboard.css">
		<style>
			.wrap {
				position: relative;
			}
			
			.side-bar.fixed {
				background-color: #f5f5f5;
				position: fixed;
				z-index: 999;
				margin: 0;
				border: none;
				width: 300px;
				height: 100%!important;
				overflow-y: auto;
				-webkit-transition: margin-left .8s ease, margin-top .8s ease;
				-moz-transition: margin-left .8s ease, margin-top .8s ease;
				transition: margin-left .8s ease, margin-top .8s ease;
			}
			
			.main-container {
				margin-left: 300px;
				position: relative;
			}
			
			#map-container {
				position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
			}
			.site-list-item {
				background-color: #fcf9f2;
				padding: 10px;
				border-radius: 4px;
				box-shadow: 0px 2px 2px #dddddd;
				cursor: pointer;
			}
			.site-list-item:hover {
				background-color: #AFD9EE;
			}
		</style>
	</head>

	<body>
		<div id="app" v-loading.fullscreen.lock="fullscreenLoading">
			<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
						<a class="navbar-brand" href="#" style="font-size: x-large;"><strong><b>电商大数据管理平台</b> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</strong></a>
					</div>
					<navbars :acv="bnav"></navbars>
				</div>
			</nav>
			<div class="wrap" style="margin-top: 10px;">
				<div class="side-bar fixed" id="sideBar">
					<div style="padding: 10px 10px 60px 10px;">
						<div class="input-group">
							<input type="text" class="form-control" placeholder="搜索站点名称" v-model="searchKey" @keyup.enter="onSearchClick">
							<span class="input-group-btn">
                <button class="btn btn-default" type="button" @click="onSearchClick">搜索</button>
              </span>
						</div>
						<!--<p style="margin-top: 10px;color: #777;font-size: 14px;">共{{totalCount}}条数据</p>-->
						<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="total,prev, next" :total="totalCount"></el-pagination>
						<ul class="list-unstyled" style="margin-top: 10px; font-size: 14px;">
							<li v-for="item in searchData" @mouseover="onSiteListItemClick(item)">
								<p class="site-list-item">
									<b>{{item.storeName}}</b><br />
									<span class="text-muted">{{item.addressDetail}}</span>
								</p>
							</li>
						</ul>
						<div class="text-center" style="margin: 10px 0;">
							<el-pagination small @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="totalCount"></el-pagination>
						</div>
					</div>
				</div>
				<div class="main-container">
					<div id="map-container"></div>
				</div>
			</div>
		</div>
		<script src="js/ie10-viewport-bug-workaround.js"></script>
		<script src="plugins/jquery/jquery.min.js"></script>
		<script src="plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="js/vue.min.js"></script>
		<script src="js/nav.js"></script>
		<script src="plugins/element-ui/index.js"></script>
		<!--高德地图-->
		<script src="http://webapi.amap.com/maps?v=1.3&key=d386663c19f421e1130e204a6bae281d"></script>

		<script>
			new Vue({
				el: "#app",
				data: {
					bnav: {
						number: 3,
					},
					map: {},
					totalCount: 0,
					currentPage: 1,
					pageSize: 100,
					infoWindow: {},
					searchData: [],
					searchKey: '',
					fullscreenLoading: true
				},
				computed: {
					
				},
				mounted: function() {
					this.mapInit();
				},
				methods: {
					getData: function() {
						var vm = this;
						vm.fullscreenLoading = true;
						$.ajax({
							type: "get",
							url: "/ebb/ebb/list/"+
							"?start="+vm.currentPage+
							"&size="+vm.pageSize+"&type=2"+
							"&storeName="+vm.searchKey,
							async: true,
                            dataType: "json",
							success: function(data) {
								vm.totalCount = data.totalCount;
								vm.searchData = data.data;
								vm.mapMark();
							},
							error: function(err) {
								vm.fullscreenLoading = false;
								console.log(err);
							}
						});
					},
					mapInit:function() {
						var vm = this;
						this.map = new AMap.Map('map-container', {
							center: [109.196513, 27.728014],//铜仁市
							mapStyle: 'blue_night',
							zoom: 12
						});
						this.map.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
							//工具条（缩放、平移、定位）
							vm.map.addControl(new AMap.ToolBar({
								offset: new AMap.Pixel(20, 30),
								position: "RB",
								locate: false
							}));
							//比例尺
							vm.map.addControl(new AMap.Scale({
								offset: new AMap.Pixel(10, 30)
							}));
						});
						this.map.on("click", function(e) {
							console.log(e.lnglat.getLng()+','+e.lnglat.getLat());
						});
						this.infoWindow = new AMap.InfoWindow({
						    offset: new AMap.Pixel(0, -30)
						});
						this.getData();
					},
					mapMark:function() {
						var markers = [];
						var vm = this;
						var lngSum = 0;
						var latSum = 0;
						vm.map.clearMap();
						vm.fullscreenLoading = false;
						for(var i = 0; i < vm.searchData.length; i += 1) {
							var lng = vm.searchData[i].longitude;
							var lat = vm.searchData[i].latitude;
							vm.searchData[i].longitude = (!lng || lng === "" || lng == "null") ? 109.196513 + vm.getRandomLngLatArea(0.1) : lng;
							vm.searchData[i].latitude = (!lat || lat === "" || lat == "null") ? 27.728014 + vm.getRandomLngLatArea(0.2) : lat;
							lngSum += parseFloat(vm.searchData[i].longitude);
							latSum += parseFloat(vm.searchData[i].latitude);
							marker = new AMap.Marker({
								map: vm.map,
							  position: [vm.searchData[i].longitude, vm.searchData[i].latitude],
							  animation: "AMAP_ANIMATION_DROP",
							  title: vm.searchData[i].orgName,
			                offset: {x:-8, y:-34},
			                topWhenMouseOver: true,
			                extData: i
							});
							marker.on("mouseover", function(e) {
								var t = e.target;
								vm.showInfoWindow(vm.searchData[t.getExtData()], false);
							});
						}
						if(vm.searchData.length > 0) {
							lngSum *= 1 / vm.searchData.length;
							latSum *= 1 / vm.searchData.length;
							vm.map.setZoomAndCenter(10, [lngSum, latSum]);
						}
//						vm.fullscreenLoading = false;
						//vm.map.setFitView();
					},
					showInfoWindow:function(site, isCenter) {
						var content = "<h4>"+site.storeName+"</h4>"
						content += "<p class='text-muted'>负责人："+site.responsiblePerson+"</p>"
						content += "<p class='text-muted'>经度："+site.longitude+"</p>"
						content += "<p class='text-muted'>纬度："+site.latitude+"</p>"
						content += "<p class='text-muted'>地址："+site.addressDetail+"</p>"
						this.infoWindow.setContent(content);
						this.infoWindow.open(this.map, [site.longitude, site.latitude]);
						if(isCenter) {
							this.map.setCenter([site.longitude, site.latitude]);
						}
					},
					onSearchClick:function() {
						this.getData();
					},
					onSiteListItemClick:function(item) {
						this.showInfoWindow(item, true);
					},
					getRandomLngLatArea: function(radius) {
						return Math.random() * radius * ((Math.random() < 0.5) ? -1 : 1);
					},
					handleCurrentChange: function(val) {
						$('#sideBar').animate({ scrollTop: 0 }, 800);
						this.currentPage = val;
						this.getData();
					}
				}
			});
		</script>
	</body>

</html>